<template>
    <div class="cont" :class="type!='preview'?'p-t-46':''">
        <nav-bar v-if="type!='preview'" title="朋友圈预览" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle"
            text-color="#333333" :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <van-list v-if="list && list.length > 0" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
            <div class="bg-white m-t-10 radius4 m-lr-10 p-tb-12" v-for="(item, index) in list" :key="index">
                <div>
                    <div class="flex align-center">
                        <img class="m-l-10 item-img" :src="wechat_info.group_avatar || wechat_info.small_head_img_url" />
                        <div class="m-l-10">
                            <div class="text-bold font-14">{{ wechat_info.group_name || wechat_info.nick_name }}</div>
                            <div class="font-12 color-9">{{ item.push_time * 1000 | getDateDiff }}</div>
                        </div>
                    </div>
                    <!-- <div class="flex align-center justify-center look-goods color-white">
                    <van-icon class="m-r-5" name="eye-o" />
                    查看商品
                </div> -->
                </div>
                <div class="m-l-10 m-r-10 m-t-10" v-html="`${item.desc}`.replace(/\n/g, '<br/>')"></div>
                <div class="flex m-l-10 flex-wrap" v-if="item.images&&item.images.length>0">
                    <div class="m-r-10 m-t-10 thumb-video" v-if="item.content_style==28" @click="playToast">
                        <img :src="item.images[0].thumb" alt="">
                        <div class="play-circle">
                            <img src="https://img.huajuanyun.com/utools/2023/126/1701841385871.png" alt="">
                        </div>
                    </div>
                    <div class="m-r-10 m-t-10 thumb" v-else  v-for="(opt, i) in item.images" :key="i">
                        <img :src="opt.thumb" @click="previewImg(item.images, i)" alt="">
                    </div>
                </div>
                <div class="m-l-10 m-t-10 font-12 color-9" v-if="item.images&&item.images.length>0&&item.content_style==28">视频号</div>
                <div class="font-12 radius4 m-t-10 bg-grey p-10 m-l-10 m-r-10 comment-list"
                    v-for="(opt, i) in item.comment_json" :key="i">
                    <div><span class="text-bold color-primary">{{ wechat_info.group_name || wechat_info.nick_name
                    }}:</span><span v-html="`${opt.content}`.replace(/\n/g, '<br/>')"></span></div>
                    <div v-if="type!='preview'" class="copy-comment color-primary text-bold" @click="copyComment(opt.content)">复制评论</div>
                </div>
                <div class="flex justify-around m-t-20 color-0" v-if="type!='preview'">
                    <div class="flex align-center justify-center" @click="saveImg(item)">
                        <van-image class="m-r-5" radius="4" :width="16" :src="require('@/assets/img/img-download.svg')" />
                        保存素材
                    </div>
                    <div class="flex align-center justify-center" @click="onCopy(item.desc)">
                        <van-image class="m-r-5" radius="4" :width="16" :src="require('@/assets/img/copy.svg')" />
                        复制文案
                    </div>
                    <div class="flex align-center justify-center" @click="sendSns(item)">
                        <van-image class="m-r-5" radius="4" :width="20" :src="require('@/assets/img/send.svg')" />
                        一键发单
                    </div>
                </div>
            </div>
        </van-list>
        <noData v-if="list && list.length == 0" text="暂无数据" />
        <backTop />
    </div>
</template>
<script>
import { List, Switch, Checkbox, CheckboxGroup, Cell, CellGroup, Image, Button, ImagePreview } from 'vant'
export default {
    components: {
        [List.name]: List,
        [Switch.name]: Switch,
        [CheckboxGroup.name]: CheckboxGroup,
        [Checkbox.name]: Checkbox,
        [CellGroup.name]: CellGroup,
        [Cell.name]: Cell,
        [Image.name]: Image,
        [Button.name]: Button,
        [ImagePreview.name]: ImagePreview
    },
    data () {
        return {
            bgStyle: '#fff',
            list: [],
            page: 1,
            reload: true,
            result: [],
            finished: false, // 控制在页面往下移动到底部时是否调用接口获取数据
            isUpLoading: false, // 上拉加载
            username: '',
            cursor: 0,
            wechat_info: {},
            type: 'action'
        }
    },
    mounted () {
        this.username = this.$route.query.username
        this.type = this.$route.query.type || 'action'
        this.setHeader()
        this.getList(true)
        this.DS.call('DS.setClipBoardEnabled', '0')
    },
    methods: {

        getList (first) {
            if (first) {
                this.cursor = 0
            }
            this.$api.getSnsHistory({ username: this.username, cursor: this.cursor }, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.cursor = res.data.cursor
                this.wechat_info = res.data.wechat_info
                res.data.list.forEach(item => {
                    item.images = JSON.parse(item.images)
                    item.comment_json = JSON.parse(item.comment_json)
                })
                this.list = [...this.list, ...res.data.list]
                if (!res.data.list || (res.data.list && res.data.list.length == 0)) {
                    this.finished = true
                } else {
                    this.finished = false
                }
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 300)
            })
        },
        onLoadMore () {
            if (!this.finished && !this.reload) {
                this.reload = true
                this.getList()
            }
        },
        refresh () {
            this.reload = true
            this.getList(true)
        },
        openPage (url, item = {}) {
            this.$router.push({
                path: url,
                query: item
            })
        },
        back () {
            this.$router.go(-1)
        },
        setHeader () {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        },
        // 官方关键词开关
        changeState () {
            this.$api.keywordReplyPublicStatus({ status: this.isKeywordReplyPublic ? 1 : 0 }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.$toast('设置成功')
            })
        },
        // 预览图片
        previewImg (list, i) {
            let arr = list.map(item => item.thumb)
            ImagePreview({
                images: arr,
                startPosition: i
            })
        },
        copyComment (text) {
            this.$api.detectPlatform({ content: text }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                if (res.data.platform == 0) {
                    this.onCopy(text)
                } else {
                    this.getLink(text)
                }
            })
        },
        getLink (text) {
            this.$api.linkConvert({ content: text }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.onCopy(res.data.content)
            })
        },
        onCopy (text) {
            this.DS.call('DS.copyToClipboard', text)
        },
        saveImg (item) {
            if (item.images.length > 0) {
                let arr = item.images.map(item => item.thumb)
                this.DS.call('DS.downloadPics', {
                    picUrls: [...arr]
                })
            } else {
                this.$toast('这个没有图片哦~')
            }
        },
        // 一键发圈
        sendSns (item) {
            console.log(item)
            this.$api.sendSns({
                // img_url: item.images.map(item => item.thumb).join(','),
                img_url: item.timeline_xml || item.images.map(item => item.thumb).join(','),
                desc: item.desc,
                comment_list: JSON.stringify(item.comment_json)
            }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.$toast('发送成功')
            })
        },
        playToast () {
            this.$toast('视频号不支持App内播放')
        }

    }
}
</script>
<style lang="less" scoped>
.p-t-46{
    padding-top: 46px;
}
.cont {
    font-size: 14px;
    .item-img {
        width: 38px;
        height: 38px;
        object-fit: cover;
        border-radius: 4px;
        flex: 0 0 38px;
    }

    .look-goods {
        background-color: #dd4846;
        height: 30px;
        border-radius: 30px 0 0 30px;
        flex: 0 0 96px;
    }

    .comment-list {
        position: relative;

        .copy-comment {
            position: absolute;
            right: 10px;
            top: 10px;
        }
    }

    .thumb {
        width: calc(33vw - 23px);
        height: calc(33vw - 23px);
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
    }
    .thumb-video{
        width: 50vw;
        position: relative;

        img {
            width: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        .play-circle {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>